<nz-spin [nzSpinning]="loading">
  <page-header [title]="'#'+ order[0].billId">
    <ng-template #logo>
      <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    </ng-template>
    <ng-template #action>
      <button nz-button [nzType]="'primary'" *ngIf="order[0].billStatus==='NOCHECK'" (click)="sure()">{{'confirm' | translate}}</button>
      <!--<button nz-button [nzType]="'danger'" *ngIf="order[0].billStatus!=='CANCEL' && order[0].billStatus !== 'COMPLETE'" (click)="cancelOrder()">取消订单</button>-->
      <button nz-button [nzType]="'danger'" *ngIf="order[0].billStatus==='NOCHECK'" (click)="cancelOrder()">{{'cancel' | translate}}</button>
      <button nz-button (click)="back()"><i class="anticon anticon-rollback"></i>{{'goback' | translate}}</button>
    </ng-template>
    <ng-template #breadcrumb>
      <nz-breadcrumb>
        <nz-breadcrumb-item>{{'order' | translate}}</nz-breadcrumb-item>
        <nz-breadcrumb-item><a [routerLink]="['/pop/order']">{{'clientorder' | translate}}</a></nz-breadcrumb-item>
      </nz-breadcrumb>
    </ng-template>
    <ng-template #extra>
      <div nz-row>
        <div nz-col nzXs="24" nzSm="8">
          <p class="text-grey" >{{ 'status' | translate}}</p>
          <p class="text-lg">{{order[0].billStatus | OrderStatus| translate}}</p>
        </div>
        <div nz-col nzXs="24" nzSm="8">
          <p class="text-grey">{{ 'qty' | translate}}</p>
          <p class="text-lg">{{totalQty}}</p>
        </div>
        <div nz-col nzXs="24" nzSm="8">
          <p class="text-grey">{{ 'price' | translate}}</p>
          <p class="text-lg">{{totalExwPrice}}</p>
        </div>
        <!--总的cif金额-->
        <!--<div nz-col nzXs="24" nzSm="8">-->
          <!--<p class="text-grey">订单金额</p>-->
          <!--<p class="text-lg">{{totalCifPrice}}</p>-->
        <!--</div>-->
      </div>
    </ng-template>

    <desc-list size="small" col="2">
      <desc-list-item term="{{ 'createUser' | translate}}">{{order[0].username}}</desc-list-item>
      <!--<desc-list-item term="{{ 'brand' | translate}}">{{order[0].brand| brandEnPipe | uppercase}}</desc-list-item>-->
      <desc-list-item term="{{ 'createDate' | translate}}">{{order[0].createDate}}</desc-list-item>

    </desc-list>
  </page-header>

  <nz-card [nzBordered]="false" class="mb-lg" nzTitle="{{'orderDetail' | translate}}">
    <simple-table [columns]="columns" [data]="order">
      <ng-template st-row="img" let-i>
        <a><img *ngIf="i.img" (click)="showImage(imgSuffix + i.img)" [src]="imgSuffix + i.img" width="90px" style=" max-height: 40px;"/></a>
        <span *ngIf="!i.img" style="color: lightgrey; font-size: 14px;">{{'no_image' | translate}}</span>
      </ng-template>
    </simple-table>
  </nz-card>
  <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
    <ng-template #modalContent>
      <a href="javascript:void(0)"><img [src]="previewImage" [ngStyle]="{ 'width': '100%' }"/></a>
    </ng-template>
  </nz-modal>

  <nz-drawer [nzClosable]="false" [nzWidth]="320" [nzVisible]="visible" nzTitle="{{'confirm' | translate}}" (nzOnClose)="close()">
    <form nz-form>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label>{{'document_date' | translate}}</nz-form-label>
            <nz-form-control>
              <nz-date-picker nzFormat="yyyyMMdd" name="pzDate" [(ngModel)]="pzDate"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="24">
          <nz-form-item>
            <nz-form-label>{{'planned_delivery_date' | translate}}</nz-form-label>
            <nz-form-control>
              <nz-date-picker nzFormat="yyyyMMdd" name="jhDate" [(ngModel)]="jhDate"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
    <div class="footer">
      <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
      <button type="button" (click)="submit()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
    </div>
  </nz-drawer>
</nz-spin>
